<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">
        <div class="col-md-10 offset-md-1 col-xs-12">
          <form @submit.prevent="handleSubmit">
            <fieldset>
              <fieldset class="form-group">
                <input
                  v-model="form.title"
                  type="text"
                  class="form-control form-control-lg"
                  placeholder="Article Title"
                />
              </fieldset>
              <fieldset class="form-group">
                <input
                  v-model="form.description"
                  type="text"
                  class="form-control"
                  placeholder="What's this article about?"
                />
              </fieldset>
              <fieldset class="form-group">
                <textarea
                  v-model="form.body"
                  class="form-control"
                  rows="8"
                  placeholder="Write your article (in markdown)"
                ></textarea>
              </fieldset>
              <fieldset class="form-group">
                <input
                  v-model="tagInput"
                  type="text"
                  class="form-control"
                  placeholder="Enter tags"
                />
                <div class="tag-list"></div>
              </fieldset>
              <button
                class="btn btn-lg pull-xs-right btn-primary"
                type="submit"
              >
                Publish Article
              </button>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticle, createArticle, updateArticle } from '@/api/article'

export default {
  middleware: 'auth',
  name: 'EditorIndex',
  async asyncData({ params, redirect, store }) {
    const data = {
      slug: '',
      form: {
        title: '',
        description: '',
        body: '',
        tagList: [],
      },
    }
    if (params.slug) {
      const { article } = await getArticle(params.slug)
      if (article.author.username !== store.state.user.username) {
        redirect({ name: 'home' })
      }
      data.slug = article.slug
      Object.assign(data.form, {
        title: article.title,
        description: article.description,
        body: article.body,
        tagList: article.tagList,
      })
      data.tagInput = article.tagList.join(',')
    }
    return {
      ...data,
    }
  },
  data() {
    return {
      tagInput: '',
    }
  },
  methods: {
    handleSubmit() {
      if (!this.form.title || !this.form.description || !this.form.body) return
      const art = this.slug ? updateArticle : createArticle
      if (this.tagInput) {
        this.form.tagList = this.tagInput.split(',')
      }
      art({ ...this.form }, this.slug).then(({ article }) => {
        this.$router.push({
          name: 'article',
          params: {
            slug: article.slug,
          },
        })
      })
    },
  },
}
</script>

<style></style>
